<template>
  <div id="home">
      <table border="1" v-if="show">
         <tr>
            <th>Id</th>
            <th>名称</th>
            <th>介绍</th>
            <th>价格</th>
            <th>地址</th>
            <th>日期</th>
         </tr>
         <tr v-for="item in list" :key="item._id">
             <td style="width:100px">{{item.productId}}</td>
             <td style="cursor: pointer; color:blue" @click="handleClick(item.productId)">{{item.productName}}</td>
             <td>{{item.productInfo || item.productInfo1 || item.productInfo2}}</td>
             <td>{{item.productPinkage}}</td>
             <td>{{item.productFrom}}</td>
             <td>{{item.productTime}}</td>
         </tr>
      </table>
      <div v-else>
         <router-view></router-view>
      </div>
  </div>
</template>

<script>
import obj  from "../../api/api"
export default {
  name: "home",
  data() {
    return {
      list: [],
      show:true,
    };
  },
  mounted() {
    this.fechData();
  },
  watch:{
     
  },
  methods: {
    fechData() {
        fetch(obj.api+"/getmoneyctrl")
          .then((r) => r.json())
          .then((res) => {
            console.log(res.result)

             this.list = res.result;
          });
    },
    handleClick(t){
       //编程导航携带参数只能用具名的方式嘛？？？
          this.$router.push({name:"news", params:{id:t}})
          this.show=false
    }
  },
};
</script>

<style scoped>
  #home{
    height: 100%;
  }
  table{
    border-collapse:collapse;
    width: 100%;
    border: 0;
  }
  table tr th {
    height: 60px;
    line-height: 60px;
    background-color: #1fddff;
    color:#fff;
    border-right: 2px solid #fff;
  }
  table tr td{
     height: 150px; 
     text-align: center;
     background: deeppink;
     color: #fff;
  }
</style>
